<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  // 图标名称
  name: {
    type: String,
    default: '',
  },
  // 图标颜色
  color: {
    type: String,
    default: '',
  },
  // 图标大小
  size: {
    type: [String, Number],
    default: 30,
  },
  // 是否有点击效果
  highlight: {
    type: Boolean,
    default: false,
  },
})

defineEmits(['click'])

const name = ref(props.name)

watch(
  () => props.name,
  (newVal) => {
    name.value = newVal
  }
)
</script>

<template>
  <view
    class="iconfont"
    :class="`icon-${name} ${highlight ? 'highlight' : ''}`"
    :style="[{ color: color, fontSize: `${size}rpx` }]"
    @click.stop="$emit('click', $event)"
  >
    <slot></slot>
  </view>
</template>

<style lang="scss" scoped>
@import url('@/static/iconfont/iconfont.css');

.iconfont {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
  color: $uni-color-primary;
  position: relative;
}

.highlight {
  &:active {
    color: $uni-color-primary;
  }
}
</style>
